<script lang="ts">
export default {
  name: "devicedata",
};
</script>

<script setup lang="ts">
import { ref } from "vue"
import { getDeviceDataPage, exportDeviceData } from "@/api/device/data";
import LineChart from "../../../components/LineChart.vue";
import { DeviceDataPageVO, DeviceDataQuery } from "@/api/device/datatypes";
import { DeviceListVO } from "@/api/device/logtypes";
import { getDeviceList } from "@/api/device/log";

const queryFormRef = ref(ElForm);
const deviceList = ref<DeviceListVO[]>();

const loading = ref(false);
const total = ref(0);

const queryParams = reactive<DeviceDataQuery>({
  dataType: 'YW',
  pageNum: 1,
  pageSize: 50,
});

const deviceDataList = ref<DeviceDataPageVO[]>();

const deviceInfo = ref(deviceDataList)
/**
 * 查询设备
 */
function getDevice() {
	loading.value = true;
	getDeviceList()
		.then(({ data }) => {
      if (data.length) {
        queryParams.deviceId = data[0].id
        queryParams.endTime = new Date()
        queryParams.startTime = new Date()
        queryParams.startTime.setTime(queryParams.startTime.getTime() - 3600 * 1000 * 24 * 7)
      }
      deviceList.value = data;
      handleQuery();
		})
		.finally(() => {
			loading.value = false;
		});
}

/**
 * 查询设备实时数据
 */
function handleQuery() {
  deviceInfo.value = []
  loading.value = true;
  const params = { ...queryParams }
  params.endTime = new Date(queryParams.endTime).getTime()
  params.startTime = new Date(queryParams.startTime).getTime()
  getDeviceDataPage(params)
    .then(({ data }) => {
      deviceDataList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 导出实时数据
 */
 function handleDataExport() {
  const params = { ...queryParams }
  params.endTime = new Date(queryParams.endTime).getTime()
  params.startTime = new Date(queryParams.startTime).getTime()
  exportDeviceData(params).then((response: any) => {
    console.log('导出数据：', response)
    const blob = new Blob([response.data], {
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
    });
    const a = document.createElement("a");
    const href = window.URL.createObjectURL(blob); // 下载的链接
    a.href = href;
    console.log('导出数据文件名：', response.headers["content-disposition"])
    // a.download = decodeURI(
    //   response.headers["content-disposition"].split(";")[1].split("=")[1]
    // ); // 获取后台设置的文件名称
    document.body.appendChild(a);
    a.click(); // 点击导出
    document.body.removeChild(a); // 下载完成移除元素
    window.URL.revokeObjectURL(href); // 释放掉blob对象
  });
}

onMounted(() => {
  getDevice();
});
</script>

<template>
  <div class="app-container">
    <div class="search">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
				<el-form-item label="设备名称：">
					<el-select
						v-model="queryParams.deviceId"
						placeholder="请选择设备名称"
						prop="deviceId"
            @change="handleQuery"
					>
						<el-option
							v-for="item in deviceList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						>
						</el-option>
					</el-select>
				</el-form-item>
        <el-form-item label="数据类型：">
          <el-select
            v-model="queryParams.dataType"
            placeholder="请选择数据类型"
            prop="dataType"
            @change="handleQuery"
          >
            <el-option label="pm" value="PM">pm</el-option>
            <el-option label="液位" value="YW">液位</el-option>
            <el-option label="温度" value="TEMP">温度</el-option>
						<el-option label="频率" value="RATE">频率</el-option>

					</el-select>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            v-model="queryParams.startTime"
            type="datetime"
            placeholder="选择开始时间"
          >
          </el-date-picker>
          <span>-</span>
          <el-date-picker
            v-model="queryParams.endTime"
            type="datetime"
            placeholder="选择结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <i-ep-search />
            搜索
          </el-button>
          <el-button class="ml-3" @click="handleDataExport">
            <template #icon><i-ep-download /></template>导出
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--曲线图-->
    <div class="data-chart" v-if="deviceDataList?.length">
      <LineChart
         id="lineChart"
         height="300px"
         width="100%"
         :info="deviceInfo"
       />
    </div>

    <el-card shadow="never">
      <template #header> </template>

      <el-table
        ref="dataTableRef"
        v-loading="loading"
        :data="deviceDataList"
        highlight-current-row
        border
      >
        <el-table-column label="设备名称" prop="deviceName" />
        <el-table-column label="设备类型" prop="dataType" />
        <el-table-column label="数据" prop="data" />
        <el-table-column label="上报时间" prop="time" />
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
  </div>
</template>
